﻿@page "/customization/theming/palette"
<DocsPage>
    <DocsPageHeader Title="Palette" SubTitle="The palette is the colors the theme uses for all the components and main layout.">
    </DocsPageHeader>
    <DocsPageSection>
        <MudText Typo="Typo.h4" Class="py-4">Default Colors</MudText>
        <MudGrid>
            <MudItem xs="12" sm="12" md="4">
                <MudPaper Class="mud-theme-primary">
                    <MudText Align="Align.Center" Class="py-16">Primary</MudText>
                    <div class="d-flex">
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-bl" Style="background-color: var(--mud-palette-primary-lighten); color: #fff;">
                            <MudText Align="Align.Center" Class="py-6">Lighten</MudText>
                        </MudPaper>
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-br" Style="background-color: var(--mud-palette-primary-darken); color: #fff;">
                            <MudText Align="Align.Center" Class="py-6">Darken</MudText>
                        </MudPaper>
                    </div>
                </MudPaper>
            </MudItem>
            <MudItem xs="12" sm="12" md="4">
                <MudPaper Class="mud-theme-secondary">
                    <MudText Align="Align.Center" Class="py-16">Secondary</MudText>
                    <div class="d-flex">
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-bl" Style="background-color: var(--mud-palette-secondary-lighten); color: #fff;">
                            <MudText Align="Align.Center" Class="py-6">Lighten</MudText>
                        </MudPaper>
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-br" Style="background-color: var(--mud-palette-secondary-darken); color: #fff;">
                            <MudText Align="Align.Center" Class="py-6">Darken</MudText>
                        </MudPaper>
                    </div>
                </MudPaper>
            </MudItem>
            <MudItem xs="12" sm="12" md="4">
                <MudPaper Class="mud-theme-tertiary">
                    <MudText Align="Align.Center" Class="py-16">Tertiary</MudText>
                    <div class="d-flex">
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-bl" Style="background-color: var(--mud-palette-tertiary-lighten); color: #fff;">
                            <MudText Align="Align.Center" Class="py-6">Lighten</MudText>
                        </MudPaper>
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-br" Style="background-color: var(--mud-palette-tertiary-darken); color: #fff;">
                            <MudText Align="Align.Center" Class="py-6">Darken</MudText>
                        </MudPaper>
                    </div>
                </MudPaper>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudPaper Class="mud-theme-info">
                    <MudText Align="Align.Center" Class="py-16">Info</MudText>
                    <div class="d-flex">
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-bl" Style="background-color: var(--mud-palette-info-lighten); color: #fff;">
                            <MudText Align="Align.Center" Class="py-4">Lighten</MudText>
                        </MudPaper>
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-br" Style="background-color: var(--mud-palette-info-darken); color: #fff;">
                            <MudText Align="Align.Center" Class="py-4">Darken</MudText>
                        </MudPaper>
                    </div>
                </MudPaper>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudPaper Class="mud-theme-success">
                    <MudText Align="Align.Center" Class="py-16">Success</MudText>
                    <div class="d-flex">
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-bl" Style="background-color: var(--mud-palette-success-lighten); color: #fff;">
                            <MudText Align="Align.Center" Class="py-4">Lighten</MudText>
                        </MudPaper>
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-br" Style="background-color: var(--mud-palette-success-darken); color: #fff;">
                            <MudText Align="Align.Center" Class="py-4">Darken</MudText>
                        </MudPaper>
                    </div>
                </MudPaper>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudPaper Class="mud-theme-warning">
                    <MudText Align="Align.Center" Class="py-16">Warning</MudText>
                    <div class="d-flex">
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-bl" Style="background-color: var(--mud-palette-warning-lighten); color: #fff;">
                            <MudText Align="Align.Center" Class="py-4">Lighten</MudText>
                        </MudPaper>
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-br" Style="background-color: var(--mud-palette-warning-darken); color: #fff;">
                            <MudText Align="Align.Center" Class="py-4">Darken</MudText>
                        </MudPaper>
                    </div>
                </MudPaper>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudPaper Class="mud-theme-error">
                    <MudText Align="Align.Center" Class="py-16">Error</MudText>
                    <div class="d-flex">
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-bl" Style="background-color: var(--mud-palette-error-lighten); color: #fff;">
                            <MudText Align="Align.Center" Class="py-4">Lighten</MudText>
                        </MudPaper>
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-br" Style="background-color: var(--mud-palette-error-darken); color: #fff;">
                            <MudText Align="Align.Center" Class="py-4">Darken</MudText>
                        </MudPaper>
                    </div>
                </MudPaper>
            </MudItem>
            <MudItem xs="12" sm="12" md="12">
                <MudPaper Class="mud-theme-dark">
                    <MudText Align="Align.Center" Class="py-6">Dark</MudText>
                    <div class="d-flex">
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-bl" Style="background-color: var(--mud-palette-dark-lighten); color: #fff;">
                            <MudText Align="Align.Center" Class="py-3">Lighten</MudText>
                        </MudPaper>
                        <MudPaper Elevation="0" Class="flex-grow-1 rounded-0 rounded-br" Style="background-color: var(--mud-palette-dark-darken); color: #fff;">
                            <MudText Align="Align.Center" Class="py-3">Darken</MudText>
                        </MudPaper>
                    </div>
                </MudPaper>
            </MudItem>
        </MudGrid>
        <MudText Typo="Typo.h4" Class="py-4">Texts</MudText>
        <SectionContent DarkenBackground="true" FullWidth="true">
            <MudGrid>
                <MudItem xs="12" sm="12" md="4">
                    <MudPaper Class="pa-2">
                        <MudText Align="Align.Center" Class="py-6 mud-text-primary" Style="font-size: 1.5rem;">Text Primary</MudText>
                    </MudPaper>
                </MudItem>
                <MudItem xs="12" sm="12" md="4">
                    <MudPaper Class="pa-2">
                        <MudText Align="Align.Center" Class="py-6 mud-text-secondary" Style="font-size: 1.5rem;">Text Secondary</MudText>
                    </MudPaper>
                </MudItem>
                <MudItem xs="12" sm="12" md="4">
                    <MudPaper Class="pa-2">
                        <MudText Align="Align.Center" Class="py-6 mud-text-disabled" Style="font-size: 1.5rem;">Text Disabled</MudText>
                    </MudPaper>
                </MudItem>
            </MudGrid>
        </SectionContent>
    </DocsPageSection>
</DocsPage>
<Footer />